// film_week_screen.dart

import 'package:film/controller/auth_controller.dart';
import 'package:film/controller/film_week_controller.dart';
import 'package:film/model/film_model.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:html/parser.dart';

// 3. 定义页面视图 (View)
class FilmWeekScreen extends StatelessWidget {
  final FilmWeekController controller = Get.put(FilmWeekController());
  final AuthController authController = Get.find();
  FilmWeekScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 30.0,
        title: const Text(
          '追番日历',
          style: TextStyle(color: Colors.white, fontSize: 14.0),
        ),
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
            size: 14.0,
          ),
          onPressed: () {
            Get.back();
          },
        ),
        centerTitle: true,
        elevation: 0,
        // 使用FlexibleSpaceBar来创建渐变背景
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.lightBlue.shade300, Colors.lightBlue.shade600],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
        bottom: TabBar(
          controller: controller.tabController,
          isScrollable: true, // 允许Tab横向滚动
          tabs: controller.weekDays.map((day) => Tab(text: day)).toList(),
          indicatorColor: Colors.yellowAccent, // 指示器颜色
          indicatorWeight: 3.0,
          labelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
          unselectedLabelStyle: const TextStyle(fontSize: 14),
          labelPadding: EdgeInsets.symmetric(horizontal: 10),
          tabAlignment: TabAlignment.center,
        ),
      ),
      // 主体内容是TabBarView，它会根据Tab的切换显示不同的内容
      body: TabBarView(
        controller: controller.tabController,
        // 根据星期的数量生成对应的页面
        children: List.generate(
          controller.weekDays.length,
          (index) => _buildDayListView(controller, index),
        ),
      ),
    );
  }

  /// 构建单日番剧列表的Widget
  Widget _buildDayListView(FilmWeekController controller, int dayIndex) {
    // Obx组件包裹，当其内部使用的响应式变量变化时，会自动重建
    return Obx(
      () => Column(
        children: [
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(16.0),
              itemCount: controller.weekFilmList.length,
              itemBuilder: (context, index) {
                return _buildFilmItem(controller.weekFilmList[index]);
              },
            ),
          ),
          // 列表底部的"底线"提示
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 20.0),
            child: Text(
              '-- 我是有底线的 --',
              style: TextStyle(color: Colors.grey),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建单个番剧项目的Widget
  Widget _buildFilmItem(Film film) {
    return GestureDetector(
      onTap: () async {
        bool isLogin = await authController.check();
        if (isLogin) {
          String url = await authController.getVideo(film.vodId!.toString(), 0);
          Get.toNamed('/film', arguments: {'url': url, 'vodId': film.vodId!.toString()});
        }
      },
      child: Padding(
        padding: const EdgeInsets.only(bottom: 20.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 左侧图片
            SizedBox(
              width: 100,
              height: 140,
              child: Stack(
                fit: StackFit.expand,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    child: Image.network(
                      film.vodPic ?? '',
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) => const Icon(Icons.error),
                    ),
                  ),
                  // 图片底部的更新状态蒙层
                  if (film.vodRemarks != null && film.vodRemarks!.isNotEmpty)
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 3),
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.6),
                          borderRadius: const BorderRadius.only(
                            bottomLeft: Radius.circular(8.0),
                            bottomRight: Radius.circular(8.0),
                          ),
                        ),
                        child: Text(
                          film.vodRemarks!,
                          style: const TextStyle(color: Colors.white, fontSize: 10),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                ],
              ),
            ),
            const SizedBox(width: 12),
            // 右侧文字信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 标题和旁边的"21"标志
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Text(
                          film.vodName ?? '',
                          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      const SizedBox(width: 8),
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.green.shade600, width: 1.5),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Text('21', style: TextStyle(color: Colors.green.shade700, fontSize: 10, fontWeight: FontWeight.bold)),
                      )
                    ],
                  ),
                  const SizedBox(height: 4),
                  // 其他元数据
                  // Text(
                  //   extraInfo[film.vodId]?['update'] ?? '',
                  //   style: const TextStyle(fontSize: 12, color: Colors.grey),
                  // ),
                  const SizedBox(height: 4),
                  Text(
                    film.vodClass ?? '',
                    style: const TextStyle(fontSize: 12, color: Colors.grey),
                  ),
                  const SizedBox(height: 8),
                  // 描述
                  Text(
                    parse(film.vodContent).body?.text ?? '',
                    style: const TextStyle(fontSize: 13, color: Colors.black54, height: 1.4),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
